<template>
	<h4 class="title_lv2"></h4>
	<div class="show_link">
		<a href="https://element-plus.org/zh-CN/component/badge.html" target="_blank">https://element-plus.org/zh-CN/component/badge.html</a>
	</div>
	<el-badge :value="12" class="item">
		<el-button>基础用法</el-button>
	</el-badge>
	<el-badge :value="200" :max="99" class="item">
		<el-button>最大值</el-button>
	</el-badge>
	<el-badge value="hot" class="item">
		<el-button>自定义</el-button>
	</el-badge>
	<el-badge is-dot class="item">
		<el-button class="share-button" icon="Share" type="primary" />
	</el-badge>
	<!-- 页面代码 源码 -->
	<dropWrap key="oreo">
		<pre><code class="language-js">{{ htmlCode }} </code></pre>
	</dropWrap>
	<!-- 页面代码 源码 -->

</template>

<script lang="ts" setup>
	import { ref, onMounted, nextTick } from "vue";
	import dropWrap from "../dropWrap.vue";
	import Prism from "prismjs";

	const value = ref(new Date())

	let htmlCode = ref<string>(`
		<el-badge :value="12" class="item">
			<el-button>基础用法</el-button>
		</el-badge>
		<el-badge :value="200" :max="99" class="item">
			<el-button>最大值</el-button>
		</el-badge>
		<el-badge value="hot" class="item">
			<el-button>自定义</el-button>
		</el-badge>
		小红点
		<el-badge is-dot class="item">
			<el-button class="share-button" icon="Share" type="primary" />
		</el-badge>
	`);

	/*
	生命周期
	*/
	onMounted(() => {
		nextTick(() => {
			Prism.highlightAll();
		});
	});
</script>
<style scoped>
	.item {
		margin-top: 10px;
		margin-right: 40px;
	}

	.el-dropdown {
		margin-top: 1.1rem;
	}
</style>